<template>
  <div id="Blacklistfile">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable
        rowKey="phid"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        @refresh="getList"
      />
    </div>
    <a-modal
      title="选择项目"
      :visible="formVisible"
      @cancel="hideFormVisible"
      :footer="null"
      width="70%">
      <div>
            <div>
              <div>
                <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">项目：</div>
                <a-input-search placeholder="请输入项目名称 " style="width: 200px" v-model="searchProject.name" @search="searchWl"/>
              </div>
              <DataTable rowKey="phidProject"  :showConfig="false" :tableData="Data2" :tableColumn="tableColumn2" :pageConfig="pageConfig2"></DataTable>
            </div>
        </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Blacklistfile extends Vue {
  projectid: any = ''
  searchForm: any = {
    projectName: '',
    sgsName: '',
    enablestate: '',
    blacklistType: '',
    carNumber: ''
  }
  sgs: any[] = []
  searchProject:any = {
    name: ''
  }
  formVisible: boolean = false;
  hideFormVisible () {
    this.formVisible = false;
    this.searchForm['projectName'] = ''
    this.searchProject.name = ''
    this.selectedRowKeys = [];
  }
  btns: any[] = [
    {
      label: '新增黑名单',
      icon: 'add',
      callback: () => this.$router.push('/files/blacklistfile/edit')
    }
  ]
  get filterData () {
    return {
       blacklistType: {
        label: '黑名单类型',
        type: 'select',
        template: {
          placeholder: '全部',
          options: [{label: '全部', value: ''}, {label: '收购商', value: '1'}, {label: '车牌号码', value: '2'}],
          clearable: true
        }
      },
      projectName: {
        label: '项目',
        type: 'input',
        width: 200,
        template: {
          placeholder: '项目',
          clearable: true,
          filterable: true,
          oc: this.showDiag
        }
      },
      sgsName: {
        label: '收购商名称',
        type: 'select',
        showSearch: true,
        template: {
          placeholder: '收购商名称',
          clearable: true,
          filterable: true,
          options: this.sgs
        }
      },
      enablestate: {
        label: '启用状态',
        type: 'select',
        template: {
          placeholder: '全部',
          options: [{label: '全部', value: ''}, {label: '启用', value: '2'}, {label: '禁用', value: '3'}],
          clearable: true
        }
      },
      carNumber: {
        label: '车牌',
        type: 'input',
        template: {
          placeholder: '车牌',
          clearable: true
        }
      }
    };
  }
  Data: any[] = [];
  tableColumn: any = {
    orgName: {
      label: '项目组织',
      minWidth: 120
    },
    projectName: {
      label: '项目',
      minWidth: 120
    },
    areaName: {
      label: '区域',
      minWidth: 100
    },
    sgsName: {
      label: '收购商名称',
      minWidth: 120
    },
    carNumber: {
      label: '车牌号码',
      minWidth: 120
    },
    enablestate: {
      label: '是否启用',
      minWidth: 170,
      type: 'select',
      disabled: true,
      options: [
        {
          label: '启用',
          value: 2
        },
        {
          label: '禁用',
          value: 3
        }
      ]
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
          tag: 'router-link',
          text: '编辑',
          path: '/files/blacklistfile/edit',
          query: {
            phid: ''
          }
        },
        {
            tag: 'router-link',
            text: '详情',
            path: '/files/blacklistfile/detail',
            query: {
              phid: ''
            }
        },
        {
            tag: 'a',
            text: '删除',
            callback: this.deleteCheck
          }
      ]
    }
  };
  Data2: any[] = [];
  tableColumn2: any = {
    ncProjectId: {
      label: '项目编码',
      minWidth: 120
    },
    ncProjectName: {
      label: '项目名称',
      minWidth: 120,
      hidden: true
    },
    action: {
      label: '操作',
      width: 120,
      template: [
        {
          tag: 'a',
          text: '确定',
          callback: this.confirmProject
        }
      ]
    }
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  pageConfig2: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage2
  };
  init () {
    this.getList()
    this.getSgsInfo()
  }
  getSearchForm () {
    let { searchForm } = this
    let { current, pageSize } = this.pageConfig
    if (this.searchForm['projectName']) {
      searchForm.phidProject = this.projectid
    } else {
      searchForm.phidProject = ''
    }
    if (this.searchForm.sgsName) {
      this.searchForm.phidsgs = this.searchForm.sgsName.split('-')[0]
      this.searchForm.sgsName = this.searchForm.sgsName.split('-')[1]
    } else {
      this.searchForm.phidsgs = ''
    }
    let form = Object.assign({ page: current, size: pageSize }, searchForm);
    return form;
  }
  showDiag () {
    this.getProjectList()
    this.formVisible = true
  }
  // 搜索物料
  searchWl (val: any) {
    // alert(val);
    this.searchProject.name = val
    this.getProjectList()
  }
  confirmProject (val: any, cb: any) {
    this.projectid = val.ncProjectId
    this.searchForm['projectName'] = val.ncProjectName
    this.formVisible = false
    this.searchProject.name = ''
    this.getList()
  }
  // 任务列表
  getList () {
    let data = this.getSearchForm()
    // console.log(data)
    this.$api.blacklistListFetch(data).then((res: any) => {
      this.Data = res.data.records;
      // console.log(this.Data)
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current;
        this.getList();
      }
    });
  }
getSgsInfo () {
  let data = {page: '1', size: '999'}
  this.$api.sgsinfoListFetch(data).then((res: any) => {
      res.data.records.map((item: any) => { item.value = item.phid + '-' + item.name; item.label = item.name; })
      this.sgs = res.data.records;
      // console.log("测试"+JSON.stringify(res.data.records))
    });
}

   // 删除
  deleteCheck (val: any) {
    let params = {
      phid: val.phid
    }
    this.$confirm({
      title: '提示',
      content: '是否确定删除？',
      onOk: () => {
         this.$api.blacklistDeleteFetch(params).then((res) => {
          this.$message.success('删除成功')
           this.getList()
         }).catch()
      },
      onCancel: () => {}
    })
  }
  callbackProject (val: any) {
    this.searchValue = val
  }
  // 项目列表
  getProjectList () {
    let word = this.searchProject.name
    let { current, pageSize } = this.pageConfig2
    let data: any = {}
    data.page = current
    data.size = pageSize
    if (word) {
      data.searchValue = word
    }
    this.$api.docInfoProjectListFetch(data).then((res: any) => {
    let projectList = res.data.records.map((item: any) => { item.label = item.ncProjectName; item.value = item.ncProjectId })
      this.Data2 = res.data.records
      console.log(res.data)
      this.pageConfig2.total = res.data.total;
    }).catch()
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  changePage2 (val: number) {
    this.pageConfig2.current = val;
    this.getProjectList();
  }
}
</script>

<style lang="scss">
</style>
